<template>
  <div class="icons" v-if="dataList.length">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page, index) of pageList" :key="index">
        <div v-for="item of page" :key="item.id" class="icon">
          <div class="icon-img">
            <img :src="item.imgUrl"/>
          </div>
          <p class="icon-name">{{item.name}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  props: {
    dataList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  },
  computed: {
    pageList () {
      const pageList = []
      for (var pageNum = 0; pageNum < Math.ceil(this.dataList.length / 8); pageNum++) {
        pageList.push(this.dataList.slice(pageNum * 8, pageNum * 8 + 8))
      }
      return pageList
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/mixins.styl"
.icons >>> .swiper-pagination-bullets
  bottom: 0
.icons >>> .swiper-container
  overflow: hidden
  width: 100%
  height: 0
  padding-bottom: 50%
  .icon
    position: relative
    overflow: hidden
    width: 25%
    height: 0
    padding-bottom: 22%
    display: inline-block
    top: 0
    left: 0
    text-align: center
    margin-top: .1rem
    .icon-img
      position: absolute
      top: 0
      right: 0
      bottom: .38rem
      left: 0
      padding: .085rem
      img
        height: 100%
    .icon-name
      position: absolute
      bottom: 0
      left: 0
      right: 0
      hight: .38rem
      line-height: .38rem
      ellipsis()
</style>
